<template>
  <div>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="10">
        <el-row>
          <template>
            <el-button size="medium" type="primary" :disabled="multipleSelection.length==0">
              <i style="padding-right: 5px" class="el-icon-plus"></i>批量通过
            </el-button>
          </template>
          <el-button size="medium" type="danger" :disabled="multipleSelection.length==0">
            <i style="padding-right: 5px" class="el-icon-delete"></i>批量删除
          </el-button>
        </el-row>
      </el-col>
      <el-col :span="14">
        <el-input style="width: 200px;float: right;margin-bottom: 10px" size="small" placeholder="请输入文章标题"></el-input>
        <el-button style="border: 0;color: #333333;background-color: rgba(0,0,0,0);
        position: absolute;right: 10px;" size="small" type="primary" icon="el-icon-search"></el-button>
      </el-col>
    </el-row>
    <template>
      <el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" border="1"
                ref="multipleTable" :data="tagManagement" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="articleName" label="文章标题">
        </el-table-column>
        <el-table-column prop="comment" label="评论内容">
        </el-table-column>
        <el-table-column width="100" prop="commentPeople" label="评论人">
        </el-table-column>
        <el-table-column prop="created" label="评论时间" width="120">
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" style="margin-right: 10px">通过</el-button>
            <!--confirm确认事件-->
            <el-popconfirm @confirm="" title="你确定将这个评论从文章中删除吗？">
              <el-button size="mini" type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div style="padding: 10px 0;float: right">
      <el-pagination :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                     :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "LabelManagement",
  data() {
    return {
      tagManagement: [
        {
          articleName: '2021',
          comment: '8',
          commentPeople: "张三",
          created: '2022-06-06'
        },
      ],
      multipleSelection: [],
      disabled: true
    }
  },
  methods: {
    controllerSwitch(data) {
      console.log(data);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    open() {
      this.$prompt('请输入标签名', '添加标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.$message({
          type: 'success',
          message: '新增标签是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>